{% extends '::base.html.twig' %}

{% block title %}{{ user }} {% trans %}Messages{% endtrans %}{% endblock %}

{% block body %}
<div class="row-fluid whiteWrapper">
    {% if firstMessageId != 0 %}
        <div onclick="getOldMessages(this);" class="alert alert-info" style="text-align: center;cursor: pointer;">
      {% trans %}Load Old Messages{% endtrans %}
            </div>
    {% endif %}

            <div class="span9">
    {% include 'KatebaAdminBundle:Message:messages.html.twig' %}
                </div>

                <div class="span2 imageBlock pull-right">
                    <span class="imageBlockText">
                        {% trans %}Learn how to choose the best college for you!{% endtrans %}
                    </span>

                    <button onclick="window.location = '{{ path('contact_us') }}'">
                        <span>{% trans %}Book{% endtrans %}</span>
                        <br>
                        {% trans %}A Free Appointment{% endtrans %} 
                    </button>
                    <button onclick="window.location = '{{ path('contact_us') }}'">
                        <span>{% trans %}Schedule{% endtrans %}</span>
                        <br>
                        {% trans %}A Free Presentation{% endtrans %}
                    </button>
                </div>

                <div class="sendMessageBlock clear">
                    <div onclick="getNewMessages();" class="alert alert-info" style="text-align: center;cursor: pointer;display: none;">
          {% trans %}Load{% endtrans %} <strong id="newMessagesCount">0</strong> {% trans %}New Message{% endtrans %}
                        </div>

                        <div id="formContainer">
            {% include 'KatebaAdminBundle:Message:newUserMessageForm.html.twig' %}
                            </div>
                        </div>
                    </div>
{% endblock %}


{% block javascripts %}
{{ parent() }}
                    <script src="{{ asset('js/jquery.form.js') }}"></script>
                    <script>
                        var lastMessageId = {{ lastMessageId }};
                        var firstMessageId = {{ firstMessageId }};
                        var loadingText = '{% trans %}Loading{% endtrans %}...';
                        var loadOldMessagesText = '{% trans %}Load Old Messages{% endtrans %}';
                        var oldMessagesUrl = '{{ path('admin_user_old_messagess', {'loginName': user.loginName}) }}/';
                        var newMessagesUrl = '{{ path('admin_user_new_messagess', {'loginName': user.loginName}) }}/';
                        var newMessagesCountUrl = '{{ path('admin_user_new_messages_count', {'loginName': user.loginName}) }}/';
                        function checkOnNewMessages() {
                            $.ajax({
                                url: newMessagesCountUrl + lastMessageId,
                                success : function(data) {
                                    var $newMessagesCount = $('#newMessagesCount');
                                    if (parseInt(data) > 0) {
                                        $newMessagesCount.html(data);
                                        $newMessagesCount.parent().slideDown();
                                        return;
                                    }
                                    $newMessagesCount.parent().slideUp();
                                }
                            });
                        }
                        function getOldMessages(divObject) {
                            var $this = $(divObject);
                            $this.html(loadingText);
                            $this.attr('onclick', '');
                            $this.css('cursor', 'auto');
                            $.ajax({
                                url: oldMessagesUrl + firstMessageId,
                                success : function(data) {
                                    firstMessageId = data.firstMessageId;
                                    $this.after(data.messages);
                                },
                                complete: function() {
                                    if (firstMessageId === 0) {
                                        $this.slideUp();
                                    } else {
                                        $this.html(loadOldMessagesText);
                                        $this.attr('onclick', 'getOldMessages(this);');
                                        $this.css('cursor', 'pointer');
                                    }
                                }
                            });
                        }
                        function getNewMessages() {
                            var $newMessagesCountParent = $('#newMessagesCount').parent();
                            $newMessagesCountParent.slideUp();
                            $.ajax({
                                url: newMessagesUrl + lastMessageId,
                                success : function(data) {
                                    lastMessageId = data.lastMessageId;
                                    $newMessagesCountParent.parent().before(data.messages);
                                    $newMessagesCountParent.slideUp();
                                }
                            });
                        }
                        function initialize() {
                            $('.messageForm').submit(function(e) {
                                e.preventDefault();
                                $('.messageFormSubmit').attr('disabled', '').html(loadingText);
                                $(this).ajaxSubmit({
                                    success: function(data) {
                                        $('#formContainer').html(data);
                                        initialize();
                                        getNewMessages();
                                    }
                                });
                            });
                        }
                        $(document).ready(function() {
                            setInterval(checkOnNewMessages, 5000);
                            initialize();
                        });
                        </script>
{% endblock %}